<template>
    <div class="app-container">
        <!-- 搜索区域 -->
        <div class="searchBox">
            <el-form :inline="true" :model="queryParams" class="demo-form-inline">
                <el-form-item label="采购计划编码">
                    <el-input v-model="queryParams.aCode" placeholder="请输入采购计划编码"></el-input>
                </el-form-item>
                <el-form-item label="采购计划名称">
                    <el-input v-model="queryParams.aName" placeholder="请输入采购计划名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button @click="onRest">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!-- 主要内容 -->
        <div class="contentForm">
            <div class="purchaseBut">
                <el-button type="primary" round @click="executeProcurement" size="small">执行采购</el-button>
                <el-button type="primary" round @click="excelData" size="small">导出</el-button>
                <el-button size="mini" icon="el-icon-sort" @click="notSourcing" style="float: right"
                    type="primary">优先展示未寻源项目</el-button>
            </div>
            <el-table key="waitSubmit" :data="planList" @selection-change="handleSelectionChange"
                v-loading="planLoading">
                <el-table-column type="selection" :selectable="selectableFunc" width="55" align="center">
                </el-table-column>
                <el-table-column fixed prop="aId" label="序号" align="center">
                </el-table-column>
                <el-table-column prop="aCode" label="采购计划编号" align="center">
                </el-table-column>
                <el-table-column prop="aName" label="采购计划名称" align="center">
                </el-table-column>
                <el-table-column prop="typeId" label="采购业务类型" align="center" :formatter="typeFormatter">
                </el-table-column>
                <el-table-column prop="projectCount" label="行项目数量" align="center">
                </el-table-column>
                <el-table-column prop="astate" label="是否已寻源" align="center">
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.astate == 4 ? '' : 'warning'" effect="dark">
                            {{ scope.row.astate == 4 ? "是" : "否" }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="createBy" label="创建人" align="center">
                </el-table-column>
                <el-table-column prop="createTime" label="创建日期" align="center">
                </el-table-column>
                <el-table-column label="操作" width="140" align="center">
                    <template slot-scope="scope">
                        <el-button @click="lookPurchasePlan(scope.row)" type="text" size="small">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页区域 -->
            <div class="pageArea">
                <div class="pageButton" style="margin-left: auto">
                    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                        :limit.sync="queryParams.pageSize" @pagination="getPurchaseList" />
                </div>
            </div>
        </div>

        <el-dialog @close="cancel" title="采购计划" :visible.sync="open" width="1000px" append-to-body>
            <el-tabs v-model="paneName">
                <el-tab-pane label="基础资料" name="basic">
                    <el-descriptions direction="vertical" class="margin-top" :column="4" size="medium" border>
                        <el-descriptions-item label="采购计划编号">{{
                            form.aCode
                        }}</el-descriptions-item>
                        <el-descriptions-item label="计划名称">{{
                            form.aName
                        }}</el-descriptions-item>
                        <el-descriptions-item label="创建人">{{
                            form.createBy
                        }}</el-descriptions-item>
                        <el-descriptions-item label="创建部门">{{
                            form.deptName
                        }}</el-descriptions-item>
                        <el-descriptions-item label="附件">
                            <el-button v-for="(item, index) in file" :key="index" type="primary"
                                @click="downloadMethod(item)">
                                下载 {{ item.name }} <i class="el-icon-download"></i>
                            </el-button>
                        </el-descriptions-item>
                    </el-descriptions>
                    <el-table max-height="250" :data="budgetList" style="margin-top: 20px">
                        <el-table-column fixed height="250" align="center" header-align="center" prop="deptId"
                            label="部门名称" :formatter="deptFormaterH">
                        </el-table-column>
                        <el-table-column prop="duId" align="center" label="预算科目编号">
                        </el-table-column>
                        <el-table-column prop="duName" align="center" label="预算科目名称">
                        </el-table-column>
                        <el-table-column prop="duTotal" align="center" label="总金额">
                        </el-table-column>
                    </el-table>
                    <!-- 行项目 -->
                    <el-table @cell-click="click" max-height="250" v-loading="loading" :data="itemList"
                        style="margin-top: 20px">
                        <el-table-column type="expand">
                            <template slot-scope="props">
                                <el-descriptions border>
                                    <el-descriptions-item label="产品名称">{{
                                        props.row.tName
                                    }}</el-descriptions-item>
                                    <el-descriptions-item label="计量单位">{{
                                        props.row.tUnit
                                    }}</el-descriptions-item>
                                    <el-descriptions-item label="税率">{{
                                        props.row.taxRate
                                    }}</el-descriptions-item>
                                    <el-descriptions-item label="类别">
                                        <el-tag size="small">{{ props.row.cName }}</el-tag>
                                    </el-descriptions-item>
                                    <el-descriptions-item label="需求说明">{{ props.row.tIllustrate }}
                                    </el-descriptions-item>
                                    <el-descriptions-item label="规格型号">{{
                                        props.row.tModel
                                    }}</el-descriptions-item>
                                </el-descriptions>
                            </template>
                        </el-table-column>
                        <el-table-column label="行项目编号" align="center" prop="vCode" width="160" />
                        <el-table-column label="数量" align="center" prop="vCount" />
                        <el-table-column label="采购人" align="center" prop="vPerson" />
                        <el-table-column label="交付时间" align="center" prop="vDeliveryTime" width="180">
                            <template slot-scope="scope">
                                <span>{{
                                    parseTime(scope.row.vDeliveryTime, "{y}-{m}-{d}")
                                }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="交付地点" align="center" prop="vDeliveryArea" width="150" />
                        <el-table-column label="需求说明" align="center" prop="vIllustrate" />
                    </el-table>
                </el-tab-pane>
            </el-tabs>
        </el-dialog>

        <el-dialog @close="cancelType" :visible.sync="openByType" title="选择采购方式" width="45%">
            <div class="radio" style="text-align: center">
                <el-radio-group v-model="typeRadio">
                    <el-radio :label="1">公开招标</el-radio>
                    <el-radio :label="6">邀请招标</el-radio>
                    <el-radio :label="2">询价</el-radio>
                    <el-radio :label="5">委托</el-radio>
                    <el-radio :label="4">竞争性谈判</el-radio>
                    <el-radio :label="3">单一来源</el-radio>
                </el-radio-group>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="sumbitType">确 定</el-button>
                <el-button @click="cancelType">取 消</el-button>
            </div>
        </el-dialog>

        <!-- 是否确认当前寻源选项 -->
        <el-dialog title="提示" :visible.sync="dialogVisible" width="40%">
            <span>确认以下项目选择 " {{ typeName }} " 吗?</span>
            <div style="width: 100%">
                <div v-for="(row, index) in selectRow" class="contentPlan" style="width: 400px" :key="row.aId">
                    <h3>采购编码: {{ row.aCode }}</h3>
                    <h3>采购名称: {{ row.aName }}</h3>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirmSourcing">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {
    getNotSourcing,
    getPlanList,
    getPurchasePlanByACode,
    submitSourcing,
    getCategory,
} from "@/api/system/purchase";
import { listDept } from "@/api/system/dept";

export default {
    dicts: ["business_type", "device_type"],
    data() {
        return {
            typeName: "",
            dialogVisible: false,
            typeRadio: 0, //采购寻源选择
            budgetList: [],
            openByType: false,
            paneName: "basic",
            num: 0, //用来判断是否是优先展示未寻源项目
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                // 搜索条件
                aCode: null,
                typeId: null,
                aName: null,
            },
            fullscreenLoading: false,
            file: [],
            total: 0,
            planList: [],
            deptList: [],
            itemList: [],
            form: {},
            loading: false,
            open: false,
            selectRow: [],
            planLoading: true,
        };
    },
    methods: {
        excelData(){
            this.download('purchase/purchasePlan/export',{
                ...this.queryParams
            }, `storage_${new Date().getTime()}.xlsx`)
        },
        getPurchaseList() {
            getPlanList(this.queryParams).then((res) => {
                this.planLoading = false;
                this.total = res.total;
                this.planList = res.rows;
            });
        },
        selectableFunc(row, index) {
            if (row.astate == 4) {
                return row.disabled;

            }
            return !row.disabled;
        },

        //确认当前寻源
        confirmSourcing() {
            this.dialogVisible = false;
            const selctStatus = {
                plan: this.selectRow,
                type: this.typeRadio,
            };
            submitSourcing(selctStatus)
                .then((res) => {
                    if (res.code == 200) {
                        this.$modal.msgSuccess("寻源成功");
                        this.getPurchaseList();
                        this.dialogVisible = false;
                    } else {
                        this.$modal.msgError("寻源失败");
                    }
                    this.cancelType();
                })
                .catch(() => {
                    this.$modal.msgError("出了点小问题,请稍候再试吧!");
                });
        },
        //确定选中项目,采购寻源选项
        sumbitType() {
            this.dialogVisible = true;
            if (this.typeRadio == "1") {
                this.typeName = "公开招标";
            } else if (this.typeRadio == "2") {
                this.typeName = "询价";
            } else if (this.typeRadio == "3") {
                this.typeName = "单一来源";
            } else if (this.typeRadio == "4") {
                this.typeName = "竞争性谈判";
            } else if (this.typeRadio == "5") {
                this.typeName = "委托";
            } else if (this.typeRadio == "6") {
                this.typeName = "邀请招标";
            }
        },
        downloadMethod() { },
        //单击查看预算
        click(row, column, cell, event) {
            console.log("row", row);
        },
        onSubmit() {
            this.getPurchaseList();
        },
        deptFormaterH(row, column, cellValue, index) {
            for (let i = 0; i < this.deptList.length; i++) {
                if (cellValue == this.deptList[i].deptId) {
                    return this.deptList[i].deptName;
                }
            }
        },
        onRest() {
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
                // 搜索条件
                aCode: null,
                typeId: null,
                aName: null,
            };
        },
        cancel() { },
        typeFormatter(row, column, cellValue, index) {
            let label = "";
            this.dict.type.business_type.forEach((rse) => {
                if (cellValue === Number(rse.value)) {
                    label = rse.label;
                    return;
                }
            });
            return label;
        },
        //执行采购按钮
        executeProcurement() {
            if (this.selectRow.length == 0) {
                this.$modal.msgError("请选择寻源项目")
                this.openByType = false;
            } else {
                this.openByType = true;
            }
        },
        //关闭采购寻源方式选择
        cancelType() {
            this.typeRadio = 1;
            this.openByType = false;
        },
        lookPurchasePlan(row) {
            this.selectPurchasePlan(row.aCode);
        },
        //后端跟进采购计划查询行项目信息,预算信息,附件文件
        selectPurchasePlan(aCode) {
            this.open = true;
            this.loading = true;
            getPurchasePlanByACode(aCode).then((res) => {
                this.loading = false;
                if (res.msg === "success") {
                    if (res.data && res.data.plan && res.data.plan.fileList != null) {
                        this.file = res.data.plan.fileList; // 文件
                    }
                    this.form = res.data.plan;
                    this.deptFormater(); //部门
                    this.budgetList = res.data.budgetList; //预suan


                    getCategory().then(response => {
                        const nameMap = Object.fromEntries(response.data.map(ree => [ree.cId, ree.cName]));
                        res.data.deviceList.forEach((ele) => {
                            if (nameMap[ele.cId]) {
                                ele.cName = nameMap[ele.cId];
                            }
                        });
                    })


                    // res.data.deviceList.forEach((res) => {
                    //     this.dict.type.device_type.forEach((device) => {
                    //         if (res.cId == device.value) {
                    //             res["cName"] = device.label;
                    //         }
                    //     });
                    // });
                    this.itemList = res.data.deviceList;
                }
            });
        },
        //部门转化(无惨)
        deptFormater() {
            for (let i = 0; i < this.deptList.length; i++) {
                if (this.form.deptId == this.deptList[i].deptId) {
                    this.form.deptName = this.deptList[i].deptName;
                }
            }
        },
        //选中行的数据
        handleSelectionChange(rows) {
            this.selectRow = rows;
        },
        //获得部门
        getDeptList() {
            listDept().then((response) => {
                console.log(response);

                this.deptList = response.data; // 将获取的数据赋值给 deptList
            });
        },
        //优先展示为寻源项目
        notSourcing() {
            this.num += 1;
            this.loading = true;
            if (this.num % 2 == 1) {
                getNotSourcing(this.queryParams).then((res) => {
                    this.loading = false;
                    this.total = res.total;
                    this.planList = res.rows;
                });
            } else {
                this.getPurchaseList();
            }
        },
    },
    mounted() {
        this.getPurchaseList();
        this.getDeptList();
    },
};
</script>

<style scoped>
.searchBox {
    margin-left: 75px;
    /* 向右靠 */
    margin-top: 20px;
    /* 向右靠 */
}

.purchaseBut {
    margin-bottom: 10px;
}

.contentPlan {}
</style>
